<div id="vue_form" class="container" style="text-align: center;height:100px">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-9">
            <input id="vue_form_input" type="text" class="form-control input-lg" placeholder="输入内容">
        </div>
        <div class="col-md-1">
            <button id="vue_form_btn" type="submit" class="btn btn-default input-lg">搜索</button>
        </div>
    </div>
</div>
<div id="vue_content">
    <div class="col-md-2"></div>
    <div class="col-md-8">
        <table class="table table-hover">
            <h4>文件列表
                <a style="cursor: pointer;" data-toggle="tooltip" data-placement="right" title="添加"
                   onmouseover="$('[data-toggle=\'tooltip\']').tooltip()">
                    <span class="glyphicon glyphicon-plus" @click="add"></span>
                </a>
            </h4>
            <thead>
            <tr>
                <th>序号</th>
                <th>描述(双击修改)</th>
                <th>文件名</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in items" onmouseover="changeDesc(this)">
                <td>{{index+1}}</td>
                <td style="display: none;">{{item.id}}</td>
                <td ondblclick="edit(this)">{{item.desc}}</td>
                <td >{{item.filename}}</td>
                <td>
                    <button type="button" class="btn btn-default btn-sm" @click="open(item.path)">
                        <span class="glyphicon glyphicon-edit"></span>打开
                    </button>
                    <button type="button" class="btn btn-default btn-sm" @click="open(item.path)">
                        <span class="glyphicon glyphicon-edit"></span>编辑
                    </button>
                    <button type="button" class="btn btn-default btn-sm" @click="del(item.id)">
                        <span class="glyphicon glyphicon-remove-sign"></span>删除
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-2"></div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="dialogModal" tabindex="-1" role="dialog" aria-labelledby="dialogModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">请选择java文件</h4>
            </div>
            <div class="modal-body">
                <input type="file" name="txt_file" id="txt_file" multiple class="file-loading"/>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<script type="text/javascript">
    var vm_cmd_list;
    var isActiveQC = false;//是否激活查询条件
    $.post(
        'java/javaCommonQuery',
        {},
        function (result) {
            vm_cmd_list = new Vue({
                el: "#vue_content",
                data: {
                    items: result.data
                    , detailsInfo: result.data[0]
                }
                , methods: {
                    open: function (path) {
                        $.post("java/openFile", {'path': path}, function () {
                        }, "json");
                    }
                    , add: function () {
                        $('#dialogModal').modal('show');

                        var control = $("#txt_file");
                        var uploadrul = "java/javaFileUpload";
                        control.fileinput({
                            language: 'zh', //设置语言
                            uploadUrl: uploadrul, //上传的地址
                            allowedFileExtensions: ['java'],//接收的文件后缀
                            showUpload: true, //显示批量上传按钮
                            showCaption: false,//是否显示标题
                            browseClass: "btn btn-primary", //按钮样式
                            dropZoneEnabled: true,//是否显示拖拽区域
                            //minImageWidth: 50, //图片的最小宽度
                            //minImageHeight: 50,//图片的最小高度
                            //maxImageWidth: 1000,//图片的最大宽度
                            //maxImageHeight: 1000,//图片的最大高度
                            //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                            //minFileCount: 0,
                            maxFileCount: 100,
                            enctype: 'multipart/form-data',
                            validateInitialCount: true,
                            previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                            dropZoneTitle: '拖动文件到此处',
                            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                        });
                        //导入文件上传完成之后的事件
                        $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
                            var res = data.response;
                            if (res.success == 'ok') {
                                MsgAlert.info(res.msg, true);
                            } else {
                                MsgAlert.warn('上传失败', true);
                            }
                        });
                    }
                    , del: function (key) {
                        MsgAlert.confirm("是否确定要删除？",function(){
                            $.post(
                                'java/javaClsDel',
                                {'id': key},
                                function (result) {
                                    if (result.success == 'ok') {
                                        MsgAlert.info("删除成功！", true);
                                        sendQuery();
                                    } else {
                                        MsgAlert.warn("删除失败！", true);
                                    }
                                }
                                , "json"
                            );
                        },true);
                    }
                }
            });
        }
        , "json"
    );

    $("#vue_form_btn").click(function (e) {
        setConditionActive();
        sendQuery();
    });

    /**
     * 设置查询条件是否激活，分页按钮点击时是否携带查询条件
     **/
    function setConditionActive() {
        var keyword = $("#vue_form_input").val();
        if (keyword != null && keyword != undefined && keyword != "") {
            isActiveQC = true;
        } else {
            isActiveQC = false;
        }
    }

    function sendQuery() {
        $("#vue_content").removeClass("hide");
        var keyword = $("#vue_form_input").val();
        keyword = isActiveQC ? keyword : "";
        $.post(
            'java/javaCommonQuery?time='+new Date(),
            {'keyword': keyword},
            function (result) {
                if (result.data.length > 0) {
                    vm_cmd_list.items = result.data;
                } else {
                    $("#vue_content").attr("class", "container hide");
                    MsgAlert.warn("没有相关数据！", true);

                }
            }
            , "json"
        );
    }

    function changeDesc(e) {
        var tr = e.firstChild;
        vm_cmd_list.detailsInfo = vm_cmd_list.items[tr.innerText];
    }

    function edit(element) {
        // 获取要编辑的文本内容
        var oldHtml = element.innerHTML;
        // 创建一个新的 input 输入框
        var newInput = document.createElement('input');
        // 为新的 input添加属性
        newInput.type = "text";
        newInput.value = oldHtml;
        // 清空当前元素的文本内容
        element.innerHTML = '';
        // 把新的 input 框 追加到当前元素节点中
        element.appendChild(newInput);
        // 设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
        newInput.setSelectionRange(0, oldHtml.length)
        // 为新 input 框获取焦点
        newInput.focus();
        // 为新的 input 添加失去焦点事件
        newInput.onblur = function () {
            // 判断失去焦点时，input 框的值是否与原值相同，相同则表示没有修改，返回原值；不同则表示有改动，返回新值
            element.innerHTML = this.value == oldHtml ? oldHtml : this.value;
            //保存
            var id = element.previousElementSibling.innerText;
            $.post("java/saveDesc",{'id':id,'value':this.value},function(result){},"json");
        }
    }


</script>
<script src="../../js/jquery-2.1.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>

<script type="text/javascript" src="../../js/fileinput.js"></script>
<script type="text/javascript" src="../../js/fileinput_locale_zh.js"></script>
<link rel="stylesheet" href="../../css/fileinput.css">